<template>

    <li class="data-content g-thumbnail-box">

        <div class="thumbnail-wrapper" @click="dataPreview">
            <div class="data-thumbnail-background">

                <template v-if="!refreshing">
                    <div v-if="isPrivate && !data.convertEnd" class="not-converted"><i class="iconfont icon-unconverted"></i> 尚未空间化</div>
                    <img v-else class="data-thumbnail" v-lazy="imageUrl"  @load="imgLoaded" :ref="'thumb-'+data.uid">
                </template>

                <div v-else class="refreshing">
                    <img src="../../../static/img/loading.svg">
                </div>
            </div>

            <div class="refresh" @click.stop="refreshThumb" 
                v-if="data.convertEnd && isPrivate && type==='private' && $store.state.isPrivateUploadData">
                <i class="iconfont icon-refresh"></i>
            </div>
        </div>

        <div class="data-info">

            <div class="data-info-container">
                <input type="text" class="data-name-input"
                    v-show='editName'
                    v-model="dataName"
                    @blur="stopEdit"
                    @input="validation"
                    :id="data.uid"
                    v-on:keyup.enter="stopEdit"
                    maxlength="50"
                    >
                <div class="data-name" :class="{'isPrivate': isPrivate && type != 'star'}"  @click="startEdit(data.uid)" :title="dataName">
                    {{dataName}}
                </div>
                <div class="data-date">
                    {{(data.updatedAt || data.createdAt) | timeFormat}}
                </div>
                <div class="data-count">
                    {{data.count}}条记录
                </div>
            </div>

        </div>

        <div class="data-option">

            <div class="chain" >
                <i class="iconfont icon-menu large" @click="toggleMenu('menu')" @blur="closeMenu" tabindex="-1"></i>

                <!--注意，通过toggleMenu控制的菜单，其内部的所有点击事件一定要使用onmousedown来触发，否则blur事件会先于click执行-->
                <div class="chain-option-container"  :class="{'is-private':isPrivate}" v-show="currentMenu === uid+'_menu'">
                    <div @mousedown="dataPreview">
                        <div class="option-icon"><i class="iconfont icon-data-preview"></i></div>
                         数据预览
                    </div>
                    <div @mousedown="openWithDataViz" target="_blank">
                        <div class="option-icon"><i class="iconfont icon-dataviz"></i></div>
                         数据上图
                    </div>
                    <!-- <div  v-if="(role==='admin' || isPrivate) && !(type === 'star' || type === 'group')" class="delete" @mousedown="removeData()">
                        <div class="option-icon"><i class="iconfont icon-delete"></i></div>
                         删除数据
                    </div> -->
                    <div v-if="$store.state.data_nav_key=='private-data' && !(type === 'star' || type === 'group')" class="delete" @mousedown="removeData()">
                        <div class="option-icon"><i class="iconfont icon-delete"></i></div>
                         删除数据
                    </div>
                    <div  v-if="type === 'star'" class="delete" @mousedown="moveOutStore()">
                        <div class="option-icon"><i class="iconfont icon-delete"></i></div>
                         移出收藏
                    </div>
                </div>
            </div>

            <template v-if="isPrivate && type != 'group'">
                <div class="download" v-if="allowDownload">
                    <i v-if="!prepareing" class="iconfont icon-download large" title="下载" @click="toggleMenu('download')" @blur="closeMenu" tabindex="-1"></i>
                    <i v-else class="iconfont icon-loading large icon-spin"></i>

                    <div class="download-option-container" v-show="currentMenu === uid+'_download'" >
                        <div v-show="data.convertEnd" class="shapefile-download">
                            <div>下载SHP</div>
                            <div class="shp-sub-option-container-wrapper">
                                <div class="shp-sub-option-container">
                                    <div v-if="showWgs84DownloadOption" @mousedown="download('shp', 'wgs')">WGS84</div>
                                    <div @mousedown="download('shp', 'bd')">百度坐标</div>
                                    <div @mousedown="download('shp', 'gcj02')">高德坐标</div>
                                </div>
                            </div>
                        </div>
                        <div class="csv-download">
                             <div @mousedown="download('csv', 'gcj02')">下载CSV</div>
                             <div class="csv-sub-option-container-wrapper" v-if="this.data.geometryType === 'pt'">
                                <div class="csv-sub-option-container">
                                    <div v-if="showWgs84DownloadOption" @mousedown="download('csv', 'wgs')">WGS84</div>
                                    <div @mousedown="download('csv', 'bd')">百度坐标</div>
                                    <div @mousedown="download('csv', 'gcj02')">高德坐标</div>
                                </div>
                             </div>
                        </div>
                        <div class="excel-download">
                             <div @mousedown="download('xlsx', 'gcj02')">下载EXCEL</div>
                             <div class="excel-sub-option-container-wrapper" v-if="fasle">
                                <div class="excel-sub-option-container">
                                    <div v-if="showWgs84DownloadOption" @mousedown="download('xlsx', 'wgs')">WGS84</div>
                                    <div @mousedown="download('xlsx', 'bd')">百度坐标</div>
                                    <div @mousedown="download('xlsx', 'gcj02')">高德坐标</div>
                                </div>
                             </div>
                        </div>
                    </div>
                </div>

                <!-- <div class="share" @click="share" v-if="type !== 'star' && !! orgUid">
                    <i class="iconfont icon-share mid" title="分享"></i>
                </div> -->
            </template>
            <div @click="addStar" class="star" v-if="type != 'star'">
                <i class="iconfont icon-star large" title="收藏"></i>
            </div>
            <div @click="copyUid" class="copy">
                <i class="iconfont icon-copy large" title="复制数据UID"></i>
            </div>

        </div>

    </li>

</template>

<script>

import {publicData as publicAPI} from '@/api'
import {data as dataAPI} from '@/api'
import Clipboard from 'clipboard'
import mixin from './data-page.js'

let qs = require('qs');

export default {

    mixins: [mixin],
    name: 'tiling-wrapper',

    methods: {

        validation(e) {

            let val = this.dataName.replace(/[@#:;\$%\^&\*\\、\+\=<>\[\]\{\}\|?!,，。？'"’”【】\/\~\`]+/g, '');
            this.dataName = val;

        },

        startEdit(id) {

            if (!this.isPrivate || this.type === 'star') return;

            this.editName = true;

            this.oldName = this.dataName;

            this.$nextTick(function () {
                document.getElementById(id).focus();
            })

        },

        stopEdit() {

            if (this.oldName === this.dataName) {
                this.editName = false;
                return;
            }

            if (this.editName) {
                this.editName = false;
                this.rename();
            }

        },

        rename() {

            let params = {
                name: this.dataName
            }

            dataAPI.rename(
                this.uid,
                params,
                (res) => {
                    if (res.data.code !=0) {
                        this.$message.error('数据重命名失败');
                        this.dataName = this.oldName;
                        return;
                    }
                    this.data.name = this.dataName;
                    this.$message.success('数据重命名成功');
                },
                (err) => {
                    this.$message.error('数据重命名失败');
                    this.dataName = this.oldName;
                }
            )
        },

        refreshThumb() {

            if (this.refreshing) {
                return;
            }

            this.refreshing = true;
            let uid = this.uid;

            dataAPI.refresh(
                uid,
                (res) =>{
                    if (res.data.code != 0) {
                        this.$message.error('刷新缩略图失败');
                        this.refreshing = false;

                        return;
                    }

                    this.refreshing = false;
                    this.timestamp = Date.now();
                },
                (err) => {
                    this.$message.error('刷新缩略图失败');
                    this.refreshing = false;
                    return;
                }

            )

        },

    }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>

    @import "common";

    $mainFont: #303c46;
    $thumbBackground: #4B4E56;

    .data-content {

        width: 240px;
        height: 220px;
        float: left;
        margin: 0 15px 30px 15px;
        border-radius: $bdRadius;
        background-color: #fff;
        position: relative;

        .thumbnail-wrapper {

            position: relative;
            border-radius: $bdRadius;
            width: 100%;
            height: 151px;

            .refresh{
                display: none;
                position: absolute;
                top: 10px;
                right: 12px;
                font-size: 20px;
                line-height: 20px;
                color: $white;
                z-index: 9;

            }

            &:hover .refresh{
                display: block;
            }

            .data-thumbnail-background {
                @include absolute(0, 0, 0, 0);
                background-color: $thumbBackground;
                border-top-left-radius: $bdRadius;
                border-top-right-radius: $bdRadius;

                .data-thumbnail {
                    width: 140px;
                    height: 140px;
                    padding: 5px 0;
                    margin: 5px 0;
                    @include filter(drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.5)));
                    vertical-align: middle;
                    margin-left: calc(50% - 70px);
                    opacity: 0;
                }

                .not-converted{
                    // width: 60px;
                    position: absolute;
                    height: 30px;
                    font-size: 14px;
                    line-height: 30px;
                    width: 100%;
                    color: #fff;
                    top: 50%;
                    transform: translateY(-50%);
                    text-align: center;

                    >i {
                        font-size: 14px;
                    }
                }

                .refreshing{
                    margin-top: 5px;
                    text-align: center;
                }
            }
        }

        .data-info {

            height: 69px;
            padding: 8px 12px 12px 12px;
            overflow: hidden;
            color: $mainFont;
            position: relative;

            .data-info-container{

                height: 100%;
                overflow: hidden;
                position: relative;

                > div {
                    overflow: hidden;
                }

                .data-name-input{
                    position: absolute;
                    border-bottom: 1px solid $bdGray;
                    height: 24px !important;
                    background-color: #fff;
                    // padding: 8px !important;
                    z-index: 1;
                    color: $dark;
                    font-weight: 400;
                    font-size: 14px;
                    margin-bottom: 4px;
                    width: 100%;
                }

                .data-name{
                    @include text-overflow;
                    height: 24px;
                    text-align: left;
                    font-size: 14px;
                    line-height: 22px;
                    position: relative;
                    margin-right: 90px;
                }

                .data-name.isPrivate:hover {
                    border-bottom: 1px solid $bdGray;
                }

                .data-date{
                    text-align: left;
                    font-size: 12px;
                    line-height: 14px;
                    width: 110px;
                    color: $dark;
                    padding: 10px 0 6px 0;
                    color: $gray;
                }

                .data-count{
                    position: absolute;
                    right: 2px;
                    top: 4px;
                    height: 14px;
                    font-size: 12px;
                    line-height: 14px;
                    text-align: left;
                }
            }

        }

        .data-option{
            position: absolute;
            right: 10px;
            bottom: 10px;

            >div{
                float: right;
                margin-left: 2px;
                text-align: center;
                height: 20px;
                width: 20px;
                line-height: 20px;
                position: relative;


                >i{
                    outline: none;
                    color: $lightGray;
                }

            }

            .large{
                font-size: 14px;
            }

            .mid {
                font-size: 13px;
            }

            .chain {
                
                .chain-option-container{
                    // overflow: hidden;
                    position: absolute;
                    z-index: 9;
                    width: 92px;
                    background-color: $bgWhite;
                    border-radius: $bdRadius;
                    bottom: 30px;
                    right: -20px;
                    border: 1px solid $bdGray;
                    text-align: left;
                    color: $gray;
                    padding: 6px 0;

                    i {
                        font-size: 14px;
                        width: 18px;
                    }

                    >div {
                        padding: 4px 8px;

                        cursor: pointer;
                        white-space: nowrap;

                        &:hover{
                            color: $deepGray;
                            background-color: #e8eef6;
                        }
                    }

                    .delete{
                        color: $danger;

                        &:hover{
                            color: $danger !important;
                            background-color: #e8eef6;
                        }
                    }

                    .option-icon{
                        width: 18px;
                        text-align: center;
                        float: left;
                        margin-right: 6px;
                    }

                    &::before{
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 52px;
                        bottom: -10px;
                        border-top: solid 10px #d4d8db;
                        border-left: solid 8px transparent;
                        border-right: solid 8px transparent;
                    }

                    &::after{
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 54px;
                        bottom: -8px;
                        border-top: solid 8px white;
                        border-left: solid 6px transparent;
                        border-right: solid 6px transparent;
                    }

                }

                .icon-menu:hover {
                    font-weight: 500;
                    color: $primary;
                }

                .icon-menu:focus {
                    font-weight: 500;
                    color: $primary;
                }
            }

            .download {
                font-size: 12px;
                .download-option-container{
                    // overflow: hidden;
                    position: absolute;
                    z-index: 9;
                    background-color: $bgWhite;
                    border-radius: $bdRadius;
                    bottom: 30px;
                    color: $gray;
                    left: -24px;
                    border: 1px solid $bdGray;
                    text-align: left;

                    .shapefile-download:hover {
                        .shp-sub-option-container-wrapper {
                            padding: 16px;
                            display: block;
                        }
                    }

                    .csv-download:hover {
                        .csv-sub-option-container-wrapper {
                            padding: 16px;
                            display: block;
                        }
                    }

                    .excel-download:hover {
                        .excel-sub-option-container-wrapper {
                            padding: 16px;
                            display: block;
                        }
                    }

                    >div {
                        padding: 4px 6px;
                        cursor: pointer;
                        white-space:nowrap;

                        &:hover{
                            background-color: #e8eef6;
                        }
                    }

                    &::before{
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 24px;
                        bottom: -10px;
                        border-top: solid 10px #d4d8db;
                        border-left: solid 8px transparent;
                        border-right: solid 8px transparent;
                    }

                    &::after{
                        content: "";
                        width: 0;
                        height: 0;
                        position: absolute;
                        left: 26px;
                        bottom: -8px;
                        border-top: solid 8px white;
                        border-left: solid 6px transparent;
                        border-right: solid 6px transparent;
                    }
                }

                .shp-sub-option-container-wrapper {
                    display: none;
                    position: absolute;
                    left: -80px;
                    top: -16px;
                    z-index: 99;
                    .shp-sub-option-container {
                        height: auto;
                        padding: 6px;
                        background-color: #fff;
                        border-radius: 4px;
                        border: 1px solid #ddd;
                    }
                }

                .csv-sub-option-container-wrapper {
                    z-index: 99;
                    display: none;
                    position: absolute;
                    left: -80px;
                    top: 10px;
                    .csv-sub-option-container {
                        height: auto;
                        padding: 6px;
                        background-color: #fff;
                        border-radius: 4px;
                        border: 1px solid #ddd;
                    }
                }

                .excel-sub-option-container-wrapper {
                    z-index: 99;
                    display: none;
                    position: absolute;
                    left: -80px;
                    top: 36px;
                    .excel-sub-option-container {
                        height: auto;
                        padding: 6px;
                        background-color: #fff;
                        border-radius: 4px;
                        border: 1px solid #ddd;
                    }
                }

                .icon-loading{
                    font-size: 16px;
                    margin-left: 3px;
                }

                .icon-download:hover {
                    font-weight: 500;
                    color: $primary;
                }

                .icon-download:focus {
                    font-weight: 500;
                    color: $primary;
                }
            }

            .share,.copy,.star {
                >i:hover {
                    font-weight: 500;
                    color: $primary;
                }
            }
        }
    }

</style>
